import {BaseProperties, BaseEvents, BaseMethodList} from "../BaseVjsonComponent"
import defineVjsonComponent from "../../../runtime/DefineVjsonComponent"
import {Button} from "../../Defaults"
import YvDesignButton from "./YvDesignButton.vue"
import YvVjsonButton from "./YvVjsonButton.vue"
import {markRaw} from "vue";

export default defineVjsonComponent('button', {
    defaults: Button,
    designer: 'YvDesignButton',
    runtime: 'YvVjsonButton',
    install(Vue) {
        Vue.component('YvDesignButton', YvDesignButton)
        Vue.component('YvVjsonButton', YvVjsonButton)
    },
    Toolbox: [
        {category: 'basic', order: 1, icon: 'icon-jinjianniubeifen', dragGroup: 'rowGroup'}
    ],
    properties: {
        ...BaseProperties,
        text: {order: 1, desc: '按钮文本', editor: 'textfield', bindable: true, category: 'basic'},
        disabled: {order: 2, desc: '禁用', editor: 'switch', bindable: true, category: 'basic'},
        iconCls: {order: 3, desc: '图标', editor: 'icon', bindable: true, category: 'basic'},
        type: {
            order: 4, desc: '按钮类型', editor: 'combo', bindable: true, category: 'basic',
            options: [{label: 'primary', text: '主要'}, {value: 'success', label: '成功'},
                {value: 'warning', label: '警告'}, {value: 'danger', label: '危险'}, {value: 'info', label: '信息'}]
        },
        size: {
            order: 5, desc: '按钮大小', editor: 'combo', bindable: true, category: 'other',
            options: [{value: 'large', label: '大'}, {value: 'default', label: '中'}, {value: 'small', label: '小'}]
        },
        plain: {order: 6, desc: '平面模式', editor: 'switch', bindable: true, category: 'other'},
        round: {order: 7, desc: '带边框', editor: 'switch', bindable: true, category: 'other'},
        circle: {order: 8, desc: '是否圆形', editor: 'switch', bindable: true, category: 'other'},
        link: {order: 9, desc: '是否链接', editor: 'switch', bindable: true, category: 'other'},
        loading: {order: 10, desc: '显示加载中', editor: 'switch', bindable: true, category: 'other'},
    },
    events: {
        ...BaseEvents,
        click: {order: 1, desc: '点击后触发', category: 'basic'}
    },
    methodList: {
        ...BaseMethodList,
        performClick: {order: 1, desc: '点击后触发', category: 'basic'}
    }
})